<template>
  <div class="contain">
    <h1>找回密码</h1>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      class="demo-ruleForm"
    >
      <el-form-item prop="phone">
        <span class="pic-login">
          <img src="../../../imgs/切图/登录界面/main-icon-01.png" alt="" />
        </span>
        <el-input
          placeholder="请输入手机号码"
          type="phone"
          v-model="ruleForm.phone"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="codenumber">
        <span class="pic-login">
          <img src="../../../imgs/切图/登录界面/main-icon-02.png" alt="" />
        </span>
        <el-input
          style="width: 165px; margin-right: 15px"
          placeholder="请输入验证码"
          type="codenumber"
          v-model="ruleForm.codenumber"
          autocomplete="off"
          ref="getcoderef"
          >{{ randomNumber }}</el-input
        >

        <el-button
          type="primary"
          @click="getcodeMsg"
          style="
            width: 100px;
            background-color: #666fe8;
            text-align: center;
            padding-left: 13px;
          "
          >{{ sendcode }}</el-button
        >
      </el-form-item>
      <el-form-item prop="password">
        <span class="pic-login">
          <img src="../../../imgs/切图/登录界面/main-icon-03.png" alt="" />
        </span>
        <el-input
          placeholder="请输入新密码"
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <span class="pic-login">
          <img src="../../../imgs/切图/登录界面/main-icon-03.png" alt="" />
        </span>
        <el-input
          placeholder="再次输入密码"
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          style="width: 320px; background-color: #666fe8"
          >{{ submsg }}</el-button
        >
      </el-form-item>
    </el-form>

    <router-link to="/Login" style="text-decoration: none">
      <p style="color: #838ceb; text-align: center">
        已有账号，去登陆
      </p></router-link
    >
  </div>
</template>

<script>
import { findpwdApi } from "../../../api/findpwd";
import { setToken } from "../../../utils/cookieUtils";
export default {
  data() {
    var validatephone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else if (value.length != 11 || isNaN(value) || value.slice(0, 1) != 1) {
        callback(new Error("请输入正确格式手机号码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatecodenumber = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (isNaN(value)) {
        callback(new Error("请输入正确格式验证码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      randomNumber: "",
      findMsg: "",
      sendcode: "发送验证码",
      submsg: "提交",
      show: true,
      count: 61,
      ruleForm: {
        phone: "",
        codenumber: "",
        password: "",
        checkPass: "",
        username: "user",
      },
      rules: {
        phone: [
          { validator: validatephone, min: 11, max: 11, trigger: "blur" },
        ],
        codenumber: [{ validator: validatecodenumber, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    getcodeMsg() {
      // this.$nextTick(() => {
      //   console.log(this.$refs.getcoderef);
      // });
      // this.sendcode = "发送中....";
      clearInterval(clock);
      this.randomNumber = Math.round(Math.random() * (9999 - 1000) + 1000);
      alert("随机生成验证码：" + this.randomNumber);
      this.sendcode = "已发送....";
      let clock = window.setInterval(() => {
        this.sendcode = this.count + "s后重新发"; //这里解决60秒不见了的问题
        this.count--;
        this.sendcode = this.count + "s后重新发";
        if (
          this.count < 0 
          // || this.$refs.getcoderef.$options.propsData.value == this.randomNumber
        ) {
          // || this.$refs.getcoderef.value != null
          //当倒计时小于0时清除定时器
          window.clearInterval(clock);
          this.sendcode = "重新发送";
          // this.count = 60;
        }
      }, 1000);
    },
    submitForm(formName) {
      this.submsg = "修改成功，正在跳转登录....";
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("提交成功");
          findpwdApi(this.ruleForm).then((res) => {
            console.log("res", res);
            if (res.code == 200) {
              //cookie保存token
              // setToken("token", res.data);
              // let newp = res.data.password;
              //请求头添加token
              //跳转首页
              // setTimeout(() => {
                this.$router.push("/login");
                // this.$router.push({
                //   path: "/Login",
                //   query: {
                //     password: res.data.password,
                //     username: res.data.username,
                //   },
                // });
              // }, 1000);
              setToken("token", res.data);
            } else {
              alert("请输入验证信息");
            }
          });
        } else {
          console.log("账户密码错误，请重新输入");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.contain {
  padding: 80px 50px 155px 70px;
}
h1 {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-family: "微软雅黑";
  color: #232323;
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 3px;
}

/deep/.el-input {
  width: 280px;
  background-color: #f1f1fd;
  font-size: 1rem;
  font-family: "微软雅黑";
  padding-left: 40px;

  .el-input__inner {
    background-color: #f1f1fd;
    letter-spacing: 3px;
  }
}
.pic-login {
  position: absolute;
  top: 6px;
  z-index: 2;
  padding-left: 10px;
}
</style>
